<template lang="pug">
  .basis-info-wrap
    ImportantInfo.basisinfo(
      :columns="columns"
      :infoList="deviceInfoList"
      :formValues="basisData"
      style="flex:1")
</template>

<script>
import ImportantInfo from '@/components/ImportantInfo'
import { policeFlagList } from '../../../../config/marker'
export default {
  name: 'BasisInfo',
  components: {
    ImportantInfo
  },
  props: {
    siteData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    // 处理基础信息
    basisData () {
      return {
        ...this.siteData,
        ...this.siteData.device
        // provider: this.siteData.device.provider,
        // manufacturer: this.siteData.device.manufacturer,
        // deviceCode: this.siteData.device.deviceCode,
        // diameter: this.siteData.device.diameter,
        // installTime: this.siteData.device.installTime,
        // sim: this.siteData.device.sim,
        // position: this.siteData.longitude + ', ' + this.siteData.latitude
      }
    },
    deviceInfoList () {
      // ['deviceCode', 'deviceName', 'deviceModel', 'manufacturer', 'installAddress', 'provider', 'diameter', 'modBusCode', 'maintainPerson', 'maintainPersonPhone', 'deviceStage', 'onStage', 'remote', 'remoteControl', 'sim', 'productionTime', 'remark']
      // 原本列表
      // return (this.siteData.deviceName === 'LUF' || this.siteData.deviceName === 'DMA') ? ['userName', 'address', 'userCode', 'deviceCode', 'manufacturer', 'diameter', 'position', 'sim', 'installTime', 'policeFlag'] : ['siteName', 'address', 'siteCode', 'deviceCode', 'manufacturer', 'diameter', 'position', 'sim', 'installTime', 'policeFlag']
      let list = []
      if (this.siteData.deviceName === 'LUF' || this.siteData.deviceName === 'DMA' || this.siteData.deviceName === 'DPAF') {
        list = ['userName', 'userCode', 'address', 'deviceCode', 'deviceName', 'deviceModel', 'installTime', 'manufacturer', 'provider', 'diameter', 'maintainPerson', 'maintainPersonPhone', 'deviceStage', 'onStage', 'remote', 'remoteControl', 'sim', 'productionTime', 'remark']
      } else if (this.siteData.deviceName === 'WQTM') {
        list = ['siteName', 'siteCode', 'address', 'deviceCode', 'deviceName', 'deviceModel', 'installTime', 'manufacturer', 'provider', 'diameter', 'modBusCode', 'maintainPerson', 'maintainPersonPhone', 'deviceStage', 'onStage', 'remote', 'remoteControl', 'sim', 'productionTime', 'remark']
      } else if (this.siteData.deviceName === 'REG' || this.siteData.deviceName === 'PRV' || this.siteData.deviceName === 'RCV') {
        list = ['siteName', 'siteCode', 'address', 'deviceCode', 'deviceName', 'deviceModel', 'manufacturer', 'provider', 'diameter', 'maintainPerson', 'maintainPersonPhone', 'deviceStage', 'onStage', 'remote', 'remoteControl', 'sim', 'productionTime', 'remark']
      } else {
        list = ['siteName', 'siteCode', 'address', 'deviceCode', 'deviceName', 'deviceModel', 'installTime', 'manufacturer', 'provider', 'diameter', 'modBusCode', 'maintainPerson', 'maintainPersonPhone', 'deviceStage', 'onStage', 'remote', 'remoteControl', 'productionTime', 'remark']
      }
      return list
    }
  },
  data () {
    return {
      manufacturer: [],
      deviceNames: [],
      onStages: [],
      // infoList: ['userName', 'address', 'userCode', 'deviceCode', 'manufacturer', 'diameter', 'position', 'sim', 'installTime', 'policeFlag'],
      columns: {
        userName: {
          label: '用户名称',
          form: {
            type: 'text'
          },
          render: (props) => {
            return props.data || props.full.siteName || '-'
          },
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ]
        },
        userCode: {
          label: '用户编号',
          render: (props) => {
            return props.data || props.full.siteCode || '-'
          },
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '6' }
          ]
        },
        siteName: {
          label: '站点名称',
          form: {
            type: 'text'
          },
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ]
        },
        siteCode: {
          label: '站点编号',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '6' }
          ]
        }, /// ////////////////////////////////设备信息//////////////////////
        ...{
          installAddress: {
            label: '安装地址',
            form: {
              type: 'input',
              columnSize: [{
                type: 'lg',
                size: 6
              }]
            },
            columnSize: [
              { type: 'md', size: '12' },
              { type: 'sm', size: '12' }
            ]
          },
          deviceName: {
            label: '设备名称',
            width: 130,
            form: {
              type: 'select',
              rules: [{
                type: 'required',
                message: '请选择设备名称'
              }]
            },
            render: 'select',
            relation: 'deviceNames',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          deviceStage: {
            label: '设备状态',
            form: {
              type: 'select',
              rules: [{
                type: 'required',
                message: '请选择设备状态'
              }],
              columnSize: [
                { type: 'md', size: '6' },
                { type: 'sm', size: '6' }
              ]
            },
            options: [{
              value: 'NORMAL',
              label: '正常'
            }, {
              value: 'FAULT',
              label: '故障'
            }],
            relation: 'deviceStage',
            render: 'select',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          address: {
            label: '地址',
            columnSize: [
              { type: 'md', size: '12' },
              { type: 'sm', size: '12' }
            ]
          },
          deviceCode: {
            label: '设备编号',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          deviceModel: {
            label: '设备型号',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          provider: {
            label: '供应商',
            form: {
              type: 'text'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          diameter: {
            label: '管径',
            form: {
              type: 'text'
            },
            render: (prop) => {
              return prop.data ? 'DN' + prop.data : '-'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          modBusCode: {
            label: 'MODBUS设备地址',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          maintainPerson: {
            label: '维护人员',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          maintainPersonPhone: {
            label: '维护人联系方式',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          sim: {
            label: 'SIM卡号',
            form: {
              type: 'text'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          productionTime: {
            label: '出厂日期',
            render: {
              type: 'time'
            },
            dateType: 'YYYY-MM-DD HH:mm',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          policeFlag: {
            label: '状态',
            form: {
              type: 'select'
            },
            render: (data) => {
              if (data) return '-'
              return policeFlagList[data]
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          position: {
            label: '坐标',
            form: {
              type: 'text'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          remote: {
            label: '远传',
            options: [{
              value: 'true',
              label: '是'
            }, {
              value: 'false',
              label: '否'
            }],
            relation: 'yesOrNo',
            render: ({data}) => {
              return data ? '是' : '否'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          remoteControl: {
            label: '远控',
            options: [{
              value: 'true',
              label: '是'
            }, {
              value: 'false',
              label: '否'
            }],
            relation: 'yesOrNo',
            render: ({data}) => {
              return data ? '是' : '否'
            },
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          },
          remark: {
            label: '备注',
            filter: {
              type: 'input'
            }
          },
          installTime: {
            label: '安装时间',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ],
            render: {
              type: 'time'
            },
            dateType: 'YYYY-MM-DD HH:mm'
          },
          userCode: {
            label: '用户编号',
            columnSize: [
              { type: 'md', size: '6' },
              { type: 'sm', size: '6' }
            ]
          }
        },
        manufacturer: {
          label: '厂家',
          render: ({data}) => {
            const manufacturer = this.manufacturer.find(item => item.value === data)
            return manufacturer ? manufacturer.label : '-'
          },
          // relation: 'manufacturer',
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '6' }
          ]
        },
        onStage: {
          label: '使用状态',
          relation: 'onStage',
          render: ({data}) => {
            const stage = this.onStages.find(item => item.value === data)
            return stage ? stage.label : '-'
          }
        },
        deviceName: {
          label: '设备名称',
          render: ({data}) => {
            const deviceName = this.deviceNames.find(item => item.value === data)
            return deviceName ? deviceName.label : '-'
          },
          columnSize: [
            { type: 'md', size: '6' },
            { type: 'sm', size: '6' }
          ]
        }
      }
    }
  },
  created () {
    this.$getRelation({
      relations: 'manufacturer,deviceNames,onStage'
    }).then(data => {
      this.manufacturer = data.manufacturer
      this.deviceNames = data.deviceNames
      this.onStages = data.onStage
    })
  }

}
</script>

<style lang="sass">
.basis-info-wrap
  color: #555555
  font-size: 12px
  flex: 1
  display: flex
  /deep/.basisinfo
    overflow: auto
    // .important-label
    //   display: inline-block
    //   width: 130px
    //   text-align: right
</style>
